<template>
	<view>
		<popupBox ref="coupon" type="bottom" :isSlot="true">
			<view class="coupon-popup">
				<view class="title">
					<text>优惠券</text>
					<image :src="$img_path('/course/close_popup.png')" @click="close" mode="widthFix">
					</image>
				</view>
				<view class="tab">
					<view class="item" :class="coupon_tab==1?'select':''" @click="tabCheck(1)">
						<text>可使用优惠券</text>
					</view>
					<view class="item" :class="coupon_tab==2?'select':''" @click="tabCheck(2)">
						<text>不可使用优惠券</text>
					</view>
				</view>
				<view class="coupon-box">
					<view class="item" v-for="(item,i) in couponList" :key="item.id" @click="selectCoupon(item)">
						<image class="bg" :src="$img_path('/course/coupon.png')" mode="scaleToFill"></image>
						<view class="c_num">
							<view class="price">
								<text>￥</text>{{ item.reduce }}
							</view>
							<text>满{{ item.achieve }}可用</text>
						</view>
						<view class="c_info">
							<text class="xz">{{ keys[item.type] }}</text>
							<view class="c_box">
								有效期至{{ timestampToDate(item.exittime * 1000)  }}
							</view>
							<!-- <view class="time">
								仅限线上课程使用 <image :src="$img_path('/course/coupon_3.png')" mode="widthFix"></image>
							</view> -->
						</view>
						<image class="checkImg" v-if="coupon.id == item.id" :src="$img_path('/course/coupon_2.png')"
							mode="widthFix">
						</image>
						<image class="checkImg" v-else :src="$img_path('/course/coupon_1.png')" mode="widthFix"></image>

						<view class="not_use" v-if="coupon_tab==2">
							<button>不可使用</button>
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="b-box">
						<button v-if="coupon_tab==1" @click="confirm">确认</button>
					</view>
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	import {
		getUserCouponList
	} from '@/utils/api/serviceApi';
	import popupBox from '@/components/popup/popup.vue';
	import {
		timestampToDate
	} from "@/utils/utils"
	export default {
		components: {
			popupBox
		},
		data() {
			return {
				coupon_tab: 1,
				couponList: [],
				keys: {
					0: "平台通用券",
					1: "平台项目券",
					2: "商户通用券"
				},
				coupon: {}
			};
		},
		mounted() {
			this.getUserCouponList()
		},
		methods: {
			tabCheck(tab) {
				this.coupon_tab = tab
				this.getUserCouponList(tab == 1 ? 0 : -1)
			},

			open(coupon = {}) {
				this.coupon = coupon
				this.$refs.coupon.open()
			},

			close() {
				this.$refs.coupon.close()
			},

			confirm() {
				this.$emit("confirm", this.coupon)
				this.close()
			},

			async getUserCouponList(state = 0) {
				try {
					const params = {
						// 0=待使用,1=已使用,-1=已过期
						state: state,
						page: 1
					}
					const res = await getUserCouponList(params)
					console.log("用户优惠券列表", res)
					this.couponList = res.data
					// if (this.couponList.length === 0) {
					// 	this.couponList = [{
					// 		"id": 3,
					// 		"coupon_id": 4,
					// 		"type": 0,
					// 		"goods_id": 0,
					// 		"shop_id": 0,
					// 		"achieve": 10,
					// 		"reduce": 5,
					// 		"exittime": 1733134417,
					// 		"state": 0,
					// 		"createtime": 1724494417,
					// 		"goodsName": "",
					// 		"shopName": ""
					// 	}]
					// }

				} catch (e) {
					//TODO handle the exception
				}
			},

			selectCoupon(coupon) {
				this.coupon = coupon
			},

			timestampToDate(timestamp) {
				return timestampToDate(timestamp)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-popup {
		padding: 40rpx 0 0;
		background-color: #FFFFFF;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 30rpx;
				top: 0;
			}
		}

		.tab {
			display: flex;
			align-items: center;
			padding: 46rpx 62rpx 56rpx;
			justify-content: space-between;
			box-sizing: border-box;
			background-color: #ffffff;

			.item {
				text {
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
					line-height: 44rpx;
					position: relative;
				}

				&.select {
					text {
						font-weight: bold;
						color: #E72A2A;
					}

					text::before {
						position: absolute;
						content: '';
						width: 72rpx;
						height: 8rpx;
						background: #E72A2A;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						top: calc(100% + 4rpx);
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}

		.coupon-box {
			padding: 0rpx 30rpx 38rpx;
			max-height: 680rpx;
			overflow-y: auto;

			.item {
				width: 100%;
				height: 186rpx;
				position: relative;

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}

				&>image.bg {
					width: 100%;
					height: 100%;
				}

				.c_num {
					position: absolute;
					left: 40rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: center;

					.price {
						font-weight: bold;
						font-size: 48rpx;
						color: #FD845C;
						line-height: 66rpx;

						text {
							font-size: 30rpx;
						}
					}

					&>text {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 8rpx;
					}
				}

				.c_info {
					position: absolute;
					left: 204rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.xz {
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						line-height: 32rpx;
					}

					.c_box {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 6rpx;
					}

					.time {
						font-weight: 400;
						font-size: 20rpx;
						color: #E72A2A;
						line-height: 28rpx;
						margin-top: 18rpx;
						display: flex;
						align-items: center;

						image {
							width: 16.37rpx;
							height: 12rpx;
							margin-left: 15rpx;
						}
					}
				}

				.checkImg {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 48rpx;
					height: 48rpx;
				}

				.not_use {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.4);
					display: flex;
					justify-content: flex-end;
					align-items: center;
					border-radius: 30rpx;

					button {
						width: 138rpx;
						height: 48rpx;
						background: #999999;
						border-radius: 48rpx;
						font-weight: bold;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 48rpx;
						margin-right: 26rpx;
					}
				}
			}
		}

		.btn {
			padding: 20rpx 30rpx;

			// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
			// background: #FFFFFF;
			.b-box {
				width: 100%;
				height: 96rpx;
			}

			button {
				width: 100%;
				height: 96rpx;
				background: linear-gradient(90deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}
</style>